/*
 * @Author: Otway
 * @Date: 2019-01-09 11:16:08
 * @LastEditors: Otway
 * @LastEditTime: 2019-08-30 18:50:09
 * @copyright: h-visions
 */
import React, { Component } from "react";
import * as BomService from "../../axios/Bom";
import {
  Row,
  Col,
  Form,
  Input,
  notification,
  Upload,
  Button,
  Icon,
  Modal,
  Select,
  Cascader,
} from "antd";
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
  // 抽屉里面Form。二列的布局比例
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

class AddFrom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      batchNo: "",
      fileList: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
    };
  }
  InputChange = () => {
    const {
      form: { getFieldValue, setFieldsValue },
    } = this.props;
    const batchNo = getFieldValue("batchNo");
    console.log(batchNo);
    batchNo &&
      BomService.batchNoCheck(batchNo)
        .then((res) => {
          if (res.data.code !== 200) {
            Modal.confirm({
              title: res.data.msg,
              onOk() { },
              onCancel() {
                setFieldsValue({ batchNo: "" });
              },
            });
          }
          // this.setState({ monitorDataRight: res.data ? res.data : [] })
        })
        .catch((err) => {
          notification.error({
            message: err.message,
          });
        });
  };


  // onRemove = (file, type) => {
  //   // type  0 标准件  1 零件  2 配件  3 周边物料
  //   const { saveFileList } = this.props;
  //   let key = 'fileList' + (type == 0 ? '' : (type + 1))
  //   console.log(key, 'key');
  //   this.setState((state) => {
  //     const index = state[key].indexOf(file);
  //     const newFileList = state[key].slice();
  //     newFileList.splice(index, 1);
  //     saveFileList(type, newFileList);
  //     return {
  //       [key]: newFileList,
  //     };
  //   }, () => {
  //     console.log(this.state[key], key);
  //   });
  // }

  render() {
    const {
      formData,
      form: { getFieldDecorator },
      modelList,
      saveFileList,
      options,
    } = this.props;
    const { fileList, fileList2, fileList3, fileList4, fileList5 } = this.state;
    const accept = {
      accept: ".xlsx,.xls",
    };
    const propsFile1 = {
      ...accept,
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          saveFileList(0, newFileList);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        saveFileList(0, [...fileList, file]);
        this.setState((state) => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };
    const propsFile2 = {
      ...accept,
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList2.indexOf(file);
          const newFileList = state.fileList2.slice();
          newFileList.splice(index, 1);
          saveFileList(1, newFileList);
          return {
            fileList2: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        saveFileList(1, [...fileList2, file]);
        this.setState((state) => ({
          fileList2: [...state.fileList2, file],
        }));
        return false;
      },
      fileList2,
    };
    const propsFile3 = {
      ...accept,
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList3.indexOf(file);
          const newFileList = state.fileList3.slice();
          newFileList.splice(index, 1);
          saveFileList(2, newFileList);
          return {
            fileList3: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        saveFileList(2, [...fileList3, file]);
        this.setState((state) => ({
          fileList3: [...state.fileList3, file],
        }));
        return false;
      },
      fileList3,
    };
    const propsFile4 = {
      ...accept,
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList4.indexOf(file);
          const newFileList = state.fileList4.slice();
          newFileList.splice(index, 1);
          saveFileList(3, newFileList);
          return {
            fileList4: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        saveFileList(3, [...fileList4, file]);
        this.setState((state) => ({
          fileList4: [...state.fileList4, file],
        }));
        return false;
      },
      fileList4,
    };
    const propsFile5 = {
      ...accept,
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList5.indexOf(file);
          const newFileList = state.fileList5.slice();
          newFileList.splice(index, 1);
          saveFileList(4, newFileList);
          return {
            fileList5: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        saveFileList(4, [...fileList5, file]);
        this.setState((state) => ({
          fileList5: [...state.fileList5, file],
        }));
        return false;
      },
      fileList5,
    };

    if (formData.workShopCode) {
      let arr = [];
      if (formData.workShopCode.indexOf("-") != -1) {
        arr = formData.workShopCode.split("-");
      } else {
        arr = [formData.workShopCode];
      }

      console.log(arr, "arr");
      console.log(options, "options");
      options.map((item) => {
        console.log(item, "item");
        if (item.label == arr[0]) {
          formData.departmentId = [item.value];
          if (arr.length > 1) {
            item.children.map((item2) => {
              if (item2.label == arr[1]) {
                formData.departmentId = [item.value, item2.value];
              }
            });
          }
        }
      });
    }
    // console.log(formData.departmentId, "departmentId");

    return (
      <Form className="addForm_File">
        <Row>
          <Col span={24}>
            <FormItem {...formItemLayout} label={"批号"}>
              {getFieldDecorator("batchNo", {
                initialValue: formData.batchNo || "",
                rules: [
                  {
                    required: true,
                    message: "请输入批号！",
                  },
                ],
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/\s+/g, "");
                },
              })(
                <Input
                  onPressEnter={this.InputChange}
                  onBlur={this.InputChange}
                  placeholder="请输入批号"
                  allowClear
                />
              )}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem label="机型" {...formItemLayout}>
              {getFieldDecorator("model", {
                initialValue: formData.model || undefined,
                rules: [
                  {
                    required: true,
                    message: "请选择机型！",
                  },
                ],
              })(
                <Select
                  placeholder="请选择机型"
                  allowClear
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children
                      .toLowerCase()
                      .indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {modelList &&
                    modelList.map((item) => (
                      <Option key={item} value={item}>
                        {item}
                      </Option>
                    ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem label="部门" {...formItemLayout}>
              {getFieldDecorator("departmentId", {
                initialValue: formData.departmentId || undefined,
                rules: [
                  {
                    required: true,
                    message: "请选择部门",
                  },
                ],
              })(<Cascader options={options}></Cascader>)}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={"上传文件-标准件"}>
              {getFieldDecorator(
                "file1",
                {}
              )(
                <Upload {...propsFile1}>
                  <Button>
                    <Icon type="upload" /> 上传文件
                  </Button>
                </Upload>
              )}
              {/* {
                fileList && fileList.map((item, index) => {
                  return <div style={{ display: 'flex', fontSize: 14, height: 20, lineHeight: '20px' }} key={'fileList_' + index} className='upload_list'>
                    <div><Icon type="paper-clip" /></div>
                    <div style={{ flex: 1 }}>{item.name.split('.xls')[0] + '-标准件'}</div>
                    <div className="del_icon" onClick={() => this.onRemove(item, 0)}><Icon type="delete" /></div>
                  </div>
                })
              } */}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={"上传文件-零件"}>
              {getFieldDecorator(
                "file2",
                {}
              )(
                <Upload {...propsFile2}>
                  <Button>
                    <Icon type="upload" /> 上传文件
                  </Button>
                </Upload>
              )}
              {/* {
                fileList2 && fileList2.map((item, index) => {
                  return <div style={{ display: 'flex', fontSize: 14, height: 30 }} key={'fileList2_' + index}>
                    <div><Icon type="paper-clip" /></div>
                    <div style={{ padding: '0 10px', flex: 1 }}>{item.name.split('.xls')[0] + '-零件'}</div>
                    <div onClick={() => this.onRemove(item, 1)}><Icon type="delete" /></div>
                  </div>
                })
              } */}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={"上传文件-配件"}>
              {getFieldDecorator(
                "file3",
                {}
              )(
                <Upload {...propsFile3}>
                  <Button>
                    <Icon type="upload" /> 上传文件
                  </Button>
                </Upload>
              )}
              {/* {
                fileList3 && fileList3.map((item, index) => {
                  return <div style={{ display: 'flex', fontSize: 14, height: 30 }} key={'fileList3_' + index}>
                    <div><Icon type="paper-clip" /></div>
                    <div style={{ padding: '0 10px', flex: 1 }}>{item.name.split('.xls')[0] + '-配件'}</div>
                    <div onClick={() => this.onRemove(item, 2)}><Icon type="delete" /></div>
                  </div>
                })
              } */}
            </FormItem>
          </Col>
          <Col span={24}>
            <FormItem {...formItemLayout} label={"上传文件-周边物料"}>
              {getFieldDecorator(
                "file4",
                {}
              )(
                <Upload {...propsFile4}>
                  <Button>
                    <Icon type="upload" /> 上传文件
                  </Button>
                </Upload>
              )}
              {/* {
                fileList4 && fileList4.map((item, index) => {
                  return <div style={{ display: 'flex', fontSize: 14, height: 30 }} key={'fileList4_' + index}>
                    <div><Icon type="paper-clip" /></div>
                    <div style={{ padding: '0 10px', flex: 1 }}>{item.name.split('.xls')[0] + '-周边物料'}</div>
                    <div onClick={() => this.onRemove(item, 3)}><Icon type="delete" /></div>
                  </div>
                })
              } */}
            </FormItem>
          </Col>
          {/* <Col span={24}>
            <FormItem {...formItemLayout} label={'上传文件-车间'}>
              {getFieldDecorator('file5', {
              })(<Upload {...propsFile5}>
                <Button >
                  <Icon type="upload" /> 上传文件
                </Button>
              </Upload>)}
            </FormItem>
          </Col> */}
        </Row>
      </Form>
    );
  }
}

export default Form.create()(AddFrom);
